<template>
	<view>
		<dev-navbar title="家人互联"></dev-navbar>
		<!-- 家人列表 -->
		<view class="family-information">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view @tap="chooseFamily(item,index)" class="family-list" v-for="(item,index) in familyList"
					:key="index">
					<view :class="index==selectUserIndex?'selected-family':'unselected-family'">
						<dev-svg-image mode="image" :imageUrl="item.relationName | getFilmayData" width="40"
							height="50">
						</dev-svg-image>
						<view class="name-box">{{item.relationName}}</view>
					</view>
				</view>
				<view class="family-list">
					<view class="unselected-family" @tap.stop="addFamily()">
						<view class="img-box">
							<image src="https://pics.leshiguang.com/vpage/2024/01/11/daa288e4811f4ac2872f6d5a413b37d5.png"
								style="width: 40rpx;height: 40rpx;position:absolute;top: 10rpx;">
							</image>
						</view>
						<view class="name-box">添加</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<!-- 分类列表 -->
		<view class="">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#2EA7E0"
				bar-width="100"></u-tabs>
		</view>
		<!-- 健康提醒 -->
		<health-reminder v-if="current == 0" :otherUserId="anotherUserId" :taskDate="taskDate"></health-reminder>
		<!-- 健康计划 -->
		<health-plan v-if="current == 1" :otherUserId="anotherUserId" :taskDate="taskDate"></health-plan>
		<!-- 健康数据 -->
		<health-data v-if="current == 2" :otherUserId="anotherUserId" :taskDate="taskDate"></health-data>
		<!-- 撑起底部 -->
		<view style="height: 100rpx;"></view>
		<dev-iphone-bottom></dev-iphone-bottom>

	</view>
</template>

<script>
	import healthReminder from '@/pagesHome/components/health-reminder.vue'
	import healthPlan from '@/pagesHome/components/health-plan.vue'
	import healthData from '@/pagesHome/components/healthData/healthData.vue'
	import dayjs from '@/common/utils/day/day.js'

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

	export default {
		components: {
			healthReminder, //健康提醒
			healthPlan, //健康计划
			healthData,
			uTabs,
		},
		data() {
			return {
				list: [{
					name: '健康提醒'
				}, {
					name: '健康计划'
				}, {
					name: '健康数据',
				}],
				current: 0,

				openedInformation: [{
					name: '自己'
				}], //以开通的家人信息
				familyList: [], //家人列表

				anotherUserId: '', //当前选择的其他用户id
				selectUserIndex: '', //选择用户下标
				taskDate: dayjs().format('YYYY-MM-DD'), //当前日期时间
			};
		},
		onLoad(e) {
			this.selectUserIndex = e.index;
			this.anotherUserId = e.anotherUserId;
			this.getFamilyList(); //获取家人列表
		},
		filters: {
			getFilmayData(name, sex) {
				let img = '';
				switch (name) {
					case '父亲':
						img = "http://static.bsyjk.cn/family2/1E9FD767355B4D74A6DD38C4058D52BE.png";
						break;
					case '母亲':
						img = "http://static.bsyjk.cn/family1/FCF583FFEBA54338B4B7424F5C1DA2E6.png";
						break;
					case '伴侣':
						img = "http://static.bsyjk.cn/family4/5AA2D891A50F44D1B4E6120AAE4AB103.png";
						break;
					case '女儿':
						img = "http://static.bsyjk.cn/family5/CEC73995F78A4817A3202F593360B29D.png";
						break;
					case '儿子':
						img = "http://static.bsyjk.cn/family3/007642C314884B3B8167448023AE45EB.png";
						break;
					case '添加':
						img = "https://pics.leshiguang.com/vpage/2024/01/11/daa288e4811f4ac2872f6d5a413b37d5.png";
						break;
					default:
						img = 'http://static.bsyjk.cn/family/67CA2C7E6A0D4561869AB03A58A83B9E.png'
				}
				return img;
			}
		},
		methods: {
			//选择变化
			change(e) {
				console.log(e, '选择变化')
				this.current = e;
			},
			//获取家人列表
			getFamilyList() {
				this.familyList = [];
				this.$https.get(global.apiUrls.getFamilyList(global.userInfo.userId)).then(res => {
					if (res.data.code === 1000) {
						this.familyList = res.data.result;
					}
				})
			},
			//选择家人
			chooseFamily(item, index) {
				if (this.anotherUserId == item.anotherUserId) return
				this.anotherUserId = item.anotherUserId;
				this.selectUserIndex = index;
			},
			//添加家人
			addFamily() {
				uni.navigateTo({
					url: '/pagesHome/family-connectivity/family-connectivity'
				})
			},



		}
	}
</script>

<style lang="scss">
	.family-information {
		padding: 40rpx 22rpx;
		background-color: #fff;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.family-list {
		display: inline-block;
		margin-right: 20rpx;
		height: 62rpx;

		.selected-family {
			display: flex;
			height: 62rpx;
			align-items: center;
			padding: 0rpx 24rpx;
			background-image: url('https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png');
			border-radius: 47rpx;
			background-size: 100% 100%;

			.name-box {
				color: #fff;
				font-size: 28rpx;
				margin-left: 10rpx;
				line-height: 62rpx;
			}
		}

		.unselected-family {
			display: flex;
			align-items: center;
			height: 62rpx;
			padding: 1rpx 24rpx;
			border-radius: 47rpx;
			border: 1rpx solid #2EA7E0;
			margin-top: -10rpx;

			.img-box {
				width: 40rpx;
				height: 50rpx;
				// background-color: #2EA7E0;
			}

			.img-box-to {
				width: 40;
				height: 40;
				background-color: #2EA7E0
			}

			.name-box {
				color: #4A4A4A;
				font-size: 28rpx;
				margin-left: 10rpx;
			}

		}

	}
</style>
